{template 'tpl_header'}

<div class="weui-panel weui-panel_access" style="margin-top: 0;">
    <div class="single-like">
        <i class="iconfont icon-like single-like_no"></i>
    </div>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            {loop $line['thumbs'] $thumbs}
            <div class="swiper-slide">
                <img src="{php echo tomedia($thumbs)}"/>
            </div>
            {/loop}
        </div>
        <div class="swiper-pagination"></div>
    </div>
</div>
<div class="weui-panel weui-panel_access" style="margin-top: 0;">
    <div class="weui-panel__bd" id="detail">
        <div class="weui-detail-box weui-detail-box_text">
            <div class="weui-detail-box__title">{$line['name']}</div>
            <div class="weui-detail-box__price2">
                ¥{php echo number_format($line['price'],2)}／人起
            </div>
            <div class="weui-detail-box__desc">
                {$line['remark']}
            </div>
        </div>
    </div>
</div>

<div class="weui-tab-box">
    <!-- 项目菜单 -->
    <ul class="weui-tab-box__tabs">
        <li id="1" class="weui-tab-box__current">
            <div class="weui-tab-box__tabs__title">产品介绍</div>
            <div class="weui-tab-box__tabs__line"></div>
        </li>
        <li id="2" class="">
            <div class="weui-tab-box__tabs__title">费用说明</div>
            <div class="weui-tab-box__tabs__line"></div>
        </li>
        <li id="3" class="">
            <div class="weui-tab-box__tabs__title">酒店推荐</div>
            <div class="weui-tab-box__tabs__line"></div>
        </li>
        <li id="4" class="">
            <div class="weui-tab-box__tabs__title">购买须知</div>
            <div class="weui-tab-box__tabs__line"></div>
        </li>

    </ul>
    <div class="seize-seat">
        占位
    </div>
    <div class="weui-panel__bd" id="weui-panel__bd1">
        <div class="weui-detail-box weui-detail-box_appmsg">
            <div class="weui-detail-box__bd">
                <div class="weui-detail-box__tag">
                    {$line['product_desc']['title']}
                </div>
                <p class="weui-detail-box__desc">
                    {loop $line['product_desc']['desc'] $i $d}
                    {if count($goods['product_desc']['desc'])-1 > $i}
                    {$d}<br>
                    {else}
                    {$d}
                    {/if}
                    {/loop}
                </p>
                <div class="weui-detail-box__li">
                    <div class="weui-detail-box__li__title">参考行程</div>
                    <div class="weui-detail-box__li__content single-row">
                        {if !empty($line['product_desc']['trip']) }
                        {loop $line['product_desc']['trip'] $index $trip}
                        {if count($line['product_desc']['trip'])-1 > $index }
                        <div class="single-time_title">
                            <i class="iconfont icon-time"></i>&nbsp;{$trip['trip_title']}
                        </div>
                        <div>
                            <div class="single-time_border">
                                <div class="single-time_content">
                                    {loop $trip['trip_desc'] $i $t}
                                    {if count($trip['trip_desc'])-1 > $i }
                                    {$t}<br>
                                    {else}
                                    {$t}
                                    {/if}
                                    {/loop}
                                </div>
                            </div>
                        </div>
                        {else}
                        <div class="single-time_title">
                            <i class="iconfont icon-time"></i>&nbsp;{$trip['trip_title']}
                        </div>
                        <div>
                            <div class="single-time_not_border">
                                <div class="single-time_content">
                                    {loop $trip['trip_desc'] $i $t}
                                    {if count($trip['trip_desc'])-1 > $i }
                                    {$t}<br>
                                    {else}
                                    {$t}
                                    {/if}
                                    {/loop}
                                </div>
                            </div>
                        </div>
                        {/if}
                        {/loop}
                        {/if}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="weui-panel__bd" id="weui-panel__bd2" style="display: none;">
        <div class="weui-detail-box weui-detail-box_appmsg">
            <div class="weui-detail-box__bd">
                <div class="weui-detail-box__tag">
                    {$line['price_desc']['title']}
                </div>
                {if !empty($line['price_desc']['price']) }
                {loop $line['price_desc']['price'] $price}
                <div class="weui-detail-box__li">
                    <div class="weui-detail-box__li__title">{$price['price_title']}</div>
                    <div class="weui-detail-box__li__content">
                        {if !empty($price['price_desc']) }
                        {loop $price['price_desc'] $desc}
                        {$desc}<br/>
                        {/loop}
                        {/if}
                    </div>
                </div>
                {/loop}
                {/if}
            </div>
            </a>
        </div>
    </div>
    <div class="weui-panel__bd" id="weui-panel__bd3" style="display: none;">
        <div class="weui-detail-box weui-detail-box_appmsg">
            <div class="weui-detail-box__bd">
                <div class="weui-detail-box__tag">
                    酒店推荐
                </div>
                {if !empty($hotels) }
                {loop $hotels $hotel}
                <div class="hotel-recommendation">
                    <div class="hotel-recommendation_img">
                        <img src="{php echo tomedia($hotel['thumb'])}"/>
                    </div>
                    <div class="hotel-recommendation_content">
                        <div>
                            <div class="hotel-recommendation_content_title">
                                {$hotel['name']}
                            </div>
                            <div class="hotel-recommendation_content_desc">
                                {$hotel['introduction']}
                            </div>
                        </div>
                        <div onclick="detail(this);" class="hotel-recommendation_link ">
                            查看酒店
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="hotel-recommendation_detail">
                    <div class="hotel-recommendation_detail_content">
                        {$hotel['introduction']}
                    </div>
                    <div onclick='photo_browser({$hotel["thumbs"]});' class="hotel-recommendation_link font_color">
                        查看图片
                    </div>
                </div>
                {/loop}
                {/if}
            </div>
        </div>
    </div>
    <div class="weui-panel__bd" id="weui-panel__bd4" style="display: none;">
        <div class="weui-detail-box weui-detail-box_appmsg">
            <div class="weui-detail-box__bd">
                <div class="weui-detail-box__tag">
                    {$line['buy_desc']['title']}
                </div>
                {if !empty($line['buy_desc']['buy']) }
                {loop $line['buy_desc']['buy'] $buy}
                <div class="weui-detail-box__li">
                    <div class="weui-detail-box__li__title">{$buy['buy_title']}</div>
                    <div class="weui-detail-box__li__content">
                        {if !empty($buy['buy_desc']) }
                        {loop $buy['buy_desc'] $desc}
                        {$desc}<br/>
                        {/loop}
                        {/if}
                    </div>
                </div>
                {/loop}
                {/if}
            </div>
            </a>
        </div>
    </div>
</div>
<div class="nav-seize-seat"></div>
<div class="nav-price">
    <div class="nav-price_info">
        <span class="nav-price_info_title">总额：</span><span class="nav-price_info_price">￥{php echo number_format($line['price'],2)}</span>
    </div>
    <div class="nav-price_button">
        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary open-popup" data-target="#full"
           style="margin-top: 0">立即咨询</a>
    </div>
    <div class="clear"></div>
</div>
<div id="full" class='weui-popup__container'>
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal close-popup" style="background-color: rgba(0,0,0,0);">
        <div class="custom-service_information">
            <div class="custom-service_img">
                <img src="{php echo tomedia($setting['service_avatar'])}" alt="">
            </div>
            <div class="custom-service_info">
                <div>
                    {$setting['service_name']}
                </div>
                <div class="custom-service_phone">
                    {$setting['service_mobile']}
                </div>
            </div>
            <div class="clear"></div>
            <div class="custom-service_qrcode">
                <div class="custom-service_qrcode_img">
                    <img src="{php echo tomedia($setting['qr_code_img'])}" alt="">
                </div>
                <div class="custom-service_qrcode_desc">
                    长按扫描二维码
                </div>
            </div>
        </div>
    </div>
</div>
{template 'tpl_footer'}
<script src="{MOBILE_RES}js/swiper.min.js"></script>
<script>
    $(function () {
        $(".swiper-container").swiper({
            loop: true,
            autoplay: 3000
        });


        /*$("#pb1").click(function () {
            pb1.open();
        });*/

        /**
         * 根据url #hash值切换tab签
         */
        var hash = window.location.hash;
        if (hash) {
            var index = hash.substring(1);
            exchangeTab($(".weui-tab-box__tabs li").eq(index));
        }

        /**
         * tab标签栏切换
         */
        $(".weui-tab-box__tabs li").click(function () {
            var $this = $(this);
            var id = $this.attr("id");
            $('.weui-tab-box__current').removeClass('weui-tab-box__current');
            $this.addClass('weui-tab-box__current');
            $('.weui-panel__bd').hide();
            $('#detail').show();
            $('#weui-panel__bd' + id).show();
            if(id == '3'){
                //获取酒店内容元素
                var hotel_recommendation = $('.hotel-recommendation');
                $(hotel_recommendation).find('.hotel-recommendation_img').height(hotel_recommendation.height());
            }
        });

        //tab change
        $(window).scroll(function () {
            var nav_tab = $(".weui-tab-box").position().top;
            if ($(window).scrollTop() >= (nav_tab + 10)) {
                $(".weui-tab-box__tabs").addClass("weui-tab-box__add__class");
                $(".weui-tab-box__content").addClass("weui-tab-box__padding__class");
                $(".seize-seat").show();

            } else {
                $(".weui-tab-box__tabs").removeClass("weui-tab-box__add__class");
                $(".weui-tab-box__content").removeClass("weui-tab-box__padding__class");
                $(".seize-seat").hide();

            }
        })

        FastClick.attach(document.body);
    });

    function photo_browser(imgs) {
        var pb1 = $.photoBrowser({
            items: imgs
            ,
            onSlideChange: function (index) {
                console.log(this, index);
            },

            onOpen: function () {
                console.log("onOpen", this);
            },
            onClose: function () {
                console.log("onClose", this);
            }
        });
        pb1.open();
    }

    function detail(obj) {
        $(obj).toggleClass('font_color');
        $(obj).parent().parent().next().toggle();
    }

    function exchangeTab($tab, id) {
        var $this = $tab;

        if ($this.hasClass("weui-tab-box__current")) {
            return false;
        }

        if ($this.hasClass("menu")) {
            return true;
        }

        if (id == "1") {
            $("#weui-panel__bd1").show();
            $("#weui-panel__bd2").hide();
        } else {
            $("#weui-panel__bd2").show();
            $("#weui-panel__bd1").hide();
        }

        $this.addClass("weui-tab-box__current").siblings("li").removeClass("weui-tab-box__current");
        var index = $this.index();

        var $currentTabContent = $this.parent().parent().find(".weui-tab-box__content").eq(index).addClass("weui-tab-box__current");
        $currentTabContent.siblings(".weui-tab-box__content").removeClass("weui-tab-box__current");
    }
</script>